<template>
	<div class="HomeTab">
        <div class="HomeTab-scroll">
            <div class="HomeTab-1">
                <router-link to="/home/homeTabA">
                    <span style="margin-right: .24rem;">全部</span>
                </router-link>
                <router-link to="/home/homeTabB">
                    <span>蓝岛店</span><img src="/image/Home/home-tab-1.png" alt="">
                </router-link>
                <router-link to="/home/homeTabC">
                    <span>盒马云超</span><img src="/image/Home/home-tab-1.png" alt="">
                </router-link>
                <router-link to="/home/homeTabD">
                   <span>产地直采</span><img src="/image/Home/home-tab-1.png" alt="">
                </router-link>
            </div>
        </div>
	</div>
</template>

<script>
export default {
	data(){
		return {

		}
	}
}
</script>

<style scoped>
.HomeTab-1 a.router-link-exact-active span{
    color: #4facf8 !important;
}
.HomeTab-scroll{
    width: 100%;
    height: .37rem;
    overflow-x: scroll;
}
.HomeTab-1{
    width: 100%;
    height: .37rem;
    display: flex;
    overflow-x: scroll;
    overflow-y:hidden;
    align-items: center;
    padding:0 .24rem;
    position: relative;
    right: 0;
    top: 0;
}
.HomeTab-1 a{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: .08rem;
}
.HomeTab-1 a span{
    display: flex;
    justify-content: flex-end;
    color: #333;
    font-weight: bold;
    font-size: .16rem;
}
.HomeTab-1 a:nth-child(1) span{
    width: .40rem;
}
.HomeTab-1 a:nth-child(2) span{
    width: .60rem;
}
.HomeTab-1 a:nth-child(3) span,.HomeTab-1 a:nth-child(4) span{
    width: .70rem;
}
.HomeTab-1 a img{
    width: .50rem;
    height: .12rem;
    object-fit: cover;
    display: inline;
    margin-left: .06rem;
    margin-right: .12rem;
}
.HomeTab-1 a:after{
    z-index: 520;
    position: absolute;
    content: "|";
    display: block;
    height: .30rem;
    top: .08rem;
    color: #dddddd;
}
.HomeTab-1 a:nth-child(4):after{
    display: none;
}
.HomeTab-1::-webkit-scrollbar {display:none}
</style>